<template>
  <div class="double-dan-info">
    <div class="double-dan-info-header" :class="{ fixed }">
      <img src="~@/assets/imgs/information/white_icon_back.png" alt="" @click="back"/>
      <span @click="gotoList">Withdrawals Record</span>
    </div>
    <div class="cont">
      <div class="my-bonus">
        <p class="title">MY BONUS</p>
        <p class="rules" @click="handleToRules">Activity Rules <span>></span></p>
        <div class="rewards">
          <span>{{bonus | formatCurrency(',')}}</span>
          <button @click="gotoWidthDraw">Withdraw</button>
        </div>
        <p class="times">Event date: 12/24/2023 00:00 — 01/01/2024 24:00</p>
      </div>
      <img src="~@/assets/imgs/market/earn_bonus.png" alt="" class="earn" :class="{ disabled: activityEnd }" @click="handleTask">
      <div class="list">
        <p class="list-title">Earn Bonus</p>
        <template v-if="list.length > 0">
          <div class="item" v-for="(item, index) in list" :key="item.reward">
            <p>Completed {{item.completed}} {{index > 0 ? 'more' : ''}} loans (Completed {{item.value}}/{{item.completed}})</p>
            <div class="bottom">
              <span>+{{item.reward | formatCurrency(',')}} pesos</span>
              <button v-if="activityEnd" class="complete">Ended</button>
              <button v-else-if="item.value === item.completed" class="complete">Completed</button>
              <template v-else>
                <button @click="() => handleAplly(index)" :class="{ disabled: !(currentStep === index)}">Go Apply</button>
              </template>
            </div>
          </div>
        </template>
       
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      total: 0,
      currentStep: 0,
      fixed: false,
      bonus: 0,
      activityEnd: false
    }
  },
  created () {
    this.getDetail()
  },
  mounted () {
    document.body.scrollIntoView()
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    async getDetail () {
      const user = this.$storage.get('user')
      this.$hybrid.action('ee', {
        content: 'activity_page_show',
        value: {
          userid: user.userId || ''
        }
      })
      const res = await this.$api.activityDetail({ userPhone: user.phone})
      const { status, error, data } = res
      if (status === '1' && error === '00000000') {
       const { stageList, activityEnd, accountBalance, successCount} = data
       this.bonus = accountBalance
       this.total = successCount
       this.activityEnd = activityEnd === 1 // 1 结束
       let count = 0
       if (stageList.length > 0) {
        this.list = stageList.map((item, index) => {
          const currentItems = Object.entries(item)[0]
          let completed = 0
          completed = index === 0 ? currentItems[0] : currentItems[0] - count
          count = currentItems[0]
          return { completed, reward: currentItems[1], value: 0 }
        })
       }
       this.setTotal()
      }
    },
    handleScroll (e) {
      this.fixed = e.target.documentElement.scrollTop > 0
    },
    setTotal () {
      if (this.total === 0) return
      this.list.forEach(item => {
        if (this.total > 0) {
          item.value = this.total >= item.completed ? item.completed : this.total
          this.total = this.total - item.value < 0 ? 0 : this.total - item.value
        }
      })
      // this.currentStep = this.list.findLastIndex(item => item.value === item.completed) + 1
      this.currentStep = this.list.reduce((prev, cur) => {
        if (cur.value === cur.completed) prev += 1
        return prev
      }, 0)
    },
    handleToRules () {
      const user = this.$storage.get('user')
      this.$hybrid.action('ee', {
        content: 'activity_rule_click',
        value: {
          userid: user.userId || ''
        }
      })
      this.$router.push('/doubleDanEvent/rule')
    },
    back () {
      this.$router.go(-1)
    },
    gotoWidthDraw () {
      const user = this.$storage.get('user')
      this.$hybrid.action('ee', {
        content: 'activity_withdraw_click',
        value: {
          userid: user.userId || ''
        }
      })
      this.$router.push('/doubleDanEvent/withdraw?bonus=' + this.bonus)
    },
    gotoList () {
      const user = this.$storage.get('user')
      this.$hybrid.action('ee', {
        content: 'activity_record_click',
        value: {
          userid: user.userId || ''
        }
      })
      this.$router.push('/doubleDanEvent/record')
    },
    handleAplly (index) {
      if (!(this.currentStep === index)) return
      const user = this.$storage.get('user')
      const content = `activity_task${index + 1}_apply_click`
      this.$hybrid.action('ee', {
        content,
        value: {
          userid: user.userId || ''
        }
      })
      this.handleToProductList()
    },
    handleTask () {
      const user = this.$storage.get('user')
      this.$hybrid.action('ee', {
        content: 'activity_doTask_click',
        value: {
          userid: user.userId || ''
        }
      })
      this.handleToProductList()
    },
    handleToProductList () {
      if (this.activityEnd) return
      this.$router.push('/product/productList?form=doubledan')
    }
  }
}
</script>

<style lang='scss'>
.double-dan-info {
  position: relative;
  background-color: #FCEEE3;
  min-height: 100vh;
  font-family: 'Roboto', 'Roboto';
  &::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 750px;
    height: 1038px;
    content: '';
    background-image: url(~@/assets/imgs/market/dan_info_bg.png);
    background-size: 100% 100%;
    z-index: 1;
  }
  &-header {
    position: fixed;
    width: 100vw;
    height: 90px;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: 28px;
    transition: all .3s;
    &.fixed {
      background: linear-gradient(93deg, #EDA277 0%, #D54118 100%);
    }
    & > img {
      width: 36px;
    }
    z-index: 9;
  }
  & > .cont {
    position: relative;
    padding: 122px 32px 32px;
    z-index: 2;
    & > .my-bonus {
      background-image: url(~@/assets/imgs/market/info_top_bg.png);
      background-size: 100% 100%;
      padding: 82px 40px 48px 32px;
      & > .title {
        font-size: 48px;
        font-weight: 800;
        color: #EC5958;
        line-height: 58px;
      }
      & > .rules {
        display: flex;
        align-items: center;
        color: #D79D93;
        font-size: 28px;
        margin-top: 12px;
        & > span {
          margin-left: 8px;
        }
      }
      & > .rewards {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 800;
        color: #EA2D39;
        font-size: 92px;
        line-height: 108px;
        margin-top: 30px;
        & > button {
          padding: 0 32px;
          height: 82px;
          border-radius: 60px;
          background: linear-gradient(93deg, #EDA277 0%, #D54118 100%);
          font-size: 36px;
          color: #fff;
          font-weight: normal;
          line-height: 1;
        }
      }
      & > .times {
        font-size: 25px;
        margin-top: 24px;
        color: #D79D93;
      }
    }
    & > .earn {
      widows: 100%;
      margin-top: 12px;
      &.disabled {
        opacity: .5;
      }
    }
    .list {
      background-color: #fff;
      border-radius: 16px;
      padding: 40px 30px 32px;
      margin-top: 26px;
      &-title {
        color: #9B4B35;
        font-size: 36px;
      }
      & > .item {
        color: #9B4B35;
        font-size: 26px;
        border-radius: 8px;
        background: #FFF9F4;
        padding: 32px 24px;
        margin-top: 24px;
        & > div {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 24px;
          & > span {
            font-size: 48px;
            color: #EA2D39;
            font-weight: 800;
          }
          & > button {
            width: 180px;
            height: 64px;
            border-radius: 32px;
            background: #EA2D39;
            font-size: 28px;
            color: #fff;
            font-weight: normal;
            &.complete {
              background-color: #E1DADA;
            }
            &.disabled {
              background: #EA2D3950;
            }
          }
        }
      }
    }
  }
}
</style>